<template>
  <div class="contain">
    <!-- 隐藏该功能，暂不开发 -->
    <el-form :inline="true" class="head_form" hidden>
        <!-- 分类查看商品 -->
        <el-form-item label="选择分类">
          <el-select v-model="value" placeholder="选择分类">
            <el-option
              v-for="item in choose_cate"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 搜索按钮 -->
        <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button icon="el-icon-search"  @click="onSubmit" circle></el-button>
        </el-form-item> -->
    </el-form>
    <div class="msg">
      未消费订单列表
    </div>
    <el-table
      :cell-style="isCenter"
      :header-cell-style="headCenter"
      :data="tableData"
      border
      class="body_table">
      <el-table-column
        prop="user_id"
        label="用户id"
        width="150">
      </el-table-column>
      <el-table-column
        prop="order_id"
        label="订单id"
        width="310"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="food_name"
        label="商品名称"
        width="180"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop="totalNum"
        label="总数量 /个"
        width="90">
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        label="总价格 /元"
        width="90">
      </el-table-column>
      <el-table-column
        prop="orderDate"
        label="订单日期"
        width="150"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="small">消费</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { get, post } from '../../assets/http'

export default {
  name: 'OrderList',
  data () {
    return {
      value: 'naicha',
      choose_cate: [
        // { label: '缤纷奶茶', value: 'naicha' }, {label: '五彩可乐', value: 'kele'}
      ],
      tableData: [
        // {user_id: '1', order_id: '293ce1d0-1092-4c63-8906-61f0a8ae99b1', food_name: '香辣鸡腿堡', totalNum: '6', totalPrice: '72', orderDate: '预约日期:2020-03  00:00'}
      ],
      timer: null
    }
  },
  mounted () {
    this.getOrderList()
    this.timer = setInterval(this.getOrderList, 10000)
  },
  beforeDestroy () {
    console.log('删除被')
    // 页面销毁时 关闭定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    async handleClick (row) {
      // 根据订单id更改信息
      var res1 = await post('store/changeOrder', {store_id: this.$route.query.store_id, order_id: row.order_id})
      if (res1.flag) {
        this.$message.success('客人已消费成功')
        this.getOrderList()
      } else {
        this.$message('请重试')
      }
    },
    getOrderList () {
      var storeId = this.$route.query.store_id
      // 获取未消费订单列表
      if (storeId != null && storeId !== undefined) {
        get('/store/getOrderList', {store_id: storeId}).then(res => {
          if (res.flag) {
            this.tableData = res.data
          } else {
            this.$message('暂未订单')
          }
        })
      }
    },
    isCenter (row, column, rowIndex, columnIndex) {
      return 'text-align:center'
    },
    headCenter (row, rowIndex) {
      return 'text-align:center'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contain{
  width: 85%;
  margin: 10px auto;
  position: relative;
}
.head_form{
  margin-left: 3%;
}
.body_table{
  margin: 0px auto;
  width: 1070px;
}
.msg{
  margin: 10px auto;
  text-align: center;
  font-size: 35px;
  color: aquamarine;
}
</style>
